<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>班车管理</title>
		<!-- 导入jquery核心类库 -->
		<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
		<!-- 导入easyui类库 -->
		<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
		<link rel="stylesheet" type="text/css" href="../../css/default.css">
		<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
		<script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
		<script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				// 先将body隐藏，再显示，不会出现页面刷新效果
				$("body").css({visibility:"visible"});

				// 班车信息表格
				$('#grid').datagrid( {
					iconCls : 'icon-forward',
					fit : true,
					border : false,
					rownumbers : true,
					striped : true,
					pageList: [30,50,100],
					pagination : true,
					toolbar : toolbar,
					url : "../../data/vehicle.json",
					idField : 'id',
					columns : columns
				});
			});

			//工具栏
			var toolbar = [ {
				id : 'button-add',
				text : '增加',
				iconCls : 'icon-add',
				handler : function(){
                    $('#addWindow').window("open");
				}
			}, {
				id : 'button-edit',
				text : '修改',
				iconCls : 'icon-edit',
				handler : function(){
					alert('修改');
				}
			},{
				id : 'button-delete',
				text : '删除',
				iconCls : 'icon-cancel',
				handler : function(){
					alert('删除');
				}
			} ];

			// 定义列
			var columns = [ [ {
				field : 'id',
				checkbox : true,
			},{
				field : 'routeType',
				title : '线路类型',
				width : 100,
				align : 'center'
			},{
				field : 'routeName',
				title : '线路名称',
				width : 100,
				align : 'center'
			}, {
				field : 'vehicleNum',
				title : '车牌号',
				width : 100,
				align : 'center'
			}, {
				field : 'shippers',
				title : '承运商',
				width : 120,
				align : 'center'
			}, {
				field : 'driver',
				title : '司机',
				width : 120,
				align : 'center'
			}, {
				field : 'telephone',
				title : '电话',
				width : 120,
				align : 'center'
			}, {
				field : 'vehicleType',
				title : '车型',
				width : 120,
				align : 'center'
			}, {
				field : 'ton',
				title : '吨控',
				width : 120,
				align : 'center'
			}, {
				field : 'remark',
				title : '备注',
				width : 120,
				align : 'center'
			} ] ];


            $(function(){
                // 先将body隐藏，再显示，不会出现页面刷新效果
                $("body").css({visibility:"visible"});

                // 区域管理数据表格
                $('#grid').datagrid( {
                    iconCls : 'icon-forward',
                    fit : true,
                    border : false,
                    rownumbers : true,
                    striped : true,
                    pageList: [30,50,100],
                    pagination : true,
                    toolbar : toolbar,
                    url : "../../area_pageQuery",
                    idField : 'id',
                    columns : columns,
                    onDblClickRow : doDblClickRow
                });

                // 添加、修改区域窗口
                $('#addWindow').window({
                    title: '添加修改区域',
                    width: 600,
                    modal: true,
                    shadow: true,
                    closed: true,
                    height: 600,
                    resizable:false
                });

                // 为查询提交按钮 ，添加点击事件
                $("#searchBtn").click(function(){
                    // 将查询表单内容转换为 json
                    var params = $("#searchForm").serializeJson();
                    // 绑定参数到datagrid
                    $("#grid").datagrid('load',params);
                    // 关闭查询窗口
                    $("#searchWindow").window('close');
                });


                // 为快递员的保存按钮，设置点击事件
                $("#save").click(function(){
                    // 判断form元素 是否满足 校验规则
                    if($("#courierForm").form('validate')){
                        $("#courierForm").submit();
                    }else{
                        $.messager.alert("警告","表单中存在非法输入项！","warning");
                    }
                });

            });


		</script>
	</head>
	<body class="easyui-layout" style="visibility:hidden;">
	<div region="center" border="false">
		<table id="grid"></table>
	</div>
	<div class="easyui-window" title="区域添加修改" id="addWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
		<div region="north" style="height:31px;overflow:hidden;" split="false" border="false">
			<div class="datagrid-toolbar">
				<a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true">保存</a>
			</div>
		</div>

		<div region="center" style="overflow:auto;padding:5px;" border="false">
			<form id="courierForm"  action="../../vehicle_save" method="post">
				<table class="table-edit" width="100%" align="center">
					<tr class="title">
						<td colspan="2">班车管理</td>
					</tr>
					<tr>
						<td>路线类型</td>
						<td>
							<input type="text" name="id" class="easyui-validatebox" required="true" />
						</td>
					</tr>
					<tr>
						<td>路线名称</td>
						<td>
							<input type="text" name="routeName" class="easyui-validatebox" required="true" />
						</td>
					</tr>
					<tr>
						<td>车牌号</td>
						<td>
							<input type="text" name="vehicleNum" class="easyui-validatebox" required="true" />
						</td>
					</tr>
					<tr>
						<td>承运商</td>
						<td>
							<input type="text" name="shippers" class="easyui-validatebox" required="true" />
						</td>
					</tr>
					<tr>
						<td>司机</td>
						<td>
							<input type="text" name="driver" class="easyui-validatebox" required="true" />
						</td>
					</tr>
					<tr>
						<td>电话</td>
						<td>
							<input type="text" name="telephone" class="easyui-validatebox" required="true" />
						</td>
					</tr>
					<tr>
						<td>车型</td>
						<td>
							<input type="text" name="vehicleType" class="easyui-validatebox" required="true" />
						</td>
					</tr>
					<tr>
						<td>顿控</td>
						<td>
							<input type="text" name="ton" class="easyui-validatebox" required="true" />
						</td>
					</tr>
					<tr>
						<td>备注</td>
						<td>
							<input type="text" name="remark" class="easyui-validatebox" required="true" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>

	<!-- 查询区域-->
	<div class="easyui-window" title="查询区域窗口" closed="true" id="searchWindow" collapsible="false" minimizable="false" maximizable="false" style="width: 400px; top:40px;left:200px">
		<div style="overflow:auto;padding:5px;" border="false">
			<form id="searchForm">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">查询条件</td>
					</tr>
					<tr>
						<td>省份</td>
						<td>
							<input type="text" name="province" />
						</td>
					</tr>
					<tr>
						<td>城市</td>
						<td>
							<input type="text" name="city" />
						</td>
					</tr>
					<tr>
						<td>区（县）</td>
						<td>
							<input type="text" name="district" />
						</td>
					</tr>
					<tr>
						<td colspan="2"><a id="searchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a> </td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	</body>
</html>
